import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { map } from 'rxjs/operator/map';
import { Observable } from 'rxjs/Observable';
import { ParkDataProvider } from '../../providers/park-data/park-data';
import { Console } from '@angular/core/src/console';
import { Park } from '../../providers/park-data/park';
import { ParkDetailPage } from '../park-detail/park-detail';
import { IonicStorageModule } from '@ionic/storage';
import * as _ from "lodash";
import { identifierModuleUrl } from '@angular/compiler';


//声明高德地图对象AMap
declare var AMap:any;

@IonicPage()
@Component({
  selector: 'page-park-map',
  templateUrl: 'park-map.html',
})
export class ParkMapPage {
  @ViewChild('map_container') map_container:ElementRef;

  private map: any;
  private parks: Park[] =[];
  private markers: any[]=[];

  constructor(public navCtrl: NavController,
     public navParams: NavParams,
     public parkDataProvider: ParkDataProvider
     ) {
  }

  ionViewDidLoad() {
   this.initAMap();
  //  this.setMarker();
   this.setData();
   this.setEvent();
   
  }

  initAMap(){
    this.map = new AMap.Map(this.map_container.nativeElement, {
      resizeEnable:true, //允许缩放
      zoom:11,//级别
      // center: [116.397428, 39.90923],//中心点坐标
  });
  //加载插件
  AMap.plugin(['AMap.ToolBar','AMap.Geolocation'],()=>{
    this.map.addControl(new AMap.ToolBar());
    let geolocation = new AMap.Geolocation();
    geolocation.getCurrentPosition((status: any,result: any)=>{
      console.log(`精确定位${status}`);
      console.log(result);
    });
    geolocation.getCityInfo((status: any,result: any)=>{
      console.log(`城市定位${status}`);
      console.log(result);
    });
    
    this.map.addControl(geolocation);

  });
  }

  /**
   * 在高德地图中设置标注
   */
  setMarker(parks: Park[]){
    parks = parks.slice(0,10);
    console.log(parks);

    parks.forEach(park =>{
      let [lng,lat]= park.point.split(',');
      let marker = new AMap.Marker({
        position:new AMap.LngLat(lng, lat),
        title:'park.name',
        label:{content: park.name ,offset:new AMap.Pixel(20,-10)},
        clickable:true
      });
      marker.on('click',event=>{
        console.log(`点击经纬度为[${event.lnglat.getLat()},
          ${event.lnglat.getLng()}]`);
          this.parkDataProvider.getPark(park.objectId).subscribe(park=>{
            this.navCtrl.push(ParkDetailPage,{park:park});
          });
   
      });
      this.markers.push(marker);
    });

    this.map.add(this.markers);
  }

  setData(){
    this.parks=[];
  //   this.parkDataProvider.getCount().toPromise()
  //   .then(total=>{console.log(`记录总数:${total}`);
  //     return this.parkDataProvider.getAllParks(total).toPromise();
  // })
  
  // .then(data=>{
    //   data.forEach(_parks => {
      //     this.parks = this.parks.concat(_parks);
      //   });
      //   console.log(`Parks集合大小：${this.parks.length}`);
      // })
      this.parkDataProvider.getParksFromCache()
      .then(res=>{
        if(res && res.rows && res.rows.length >0){
            console.log(`查询结果集：${res.rows.length}`);
            for (let i = 0; i < res.rows.length; i++) {
              this.parks.push({
                objectId: res.rows.item(i).objectId,
                name: res.rows.item(i).name,
                point:res.rows.item(i).point
              }as Park);
              
            }
        }
      })

      .then(()=>{
    this.parks = _.filter(this.parks,(park:Park)=>{//filter过滤器
      let [lng,lat]= park.point.split(',');
      let _point = new AMap.LngLat(lng,lat);
      if (this.map.getBounds().contains(_point))
        return true;
    });
      console.log(`当前可视区域内景点个数:${this.parks.length}`)
  })
  .then(()=> {
    this.setMarker(this.parks);
  });
  }

  setEvent(){
    this.map.on('moveend',()=>{this.setData()});
    this.map.on('zoomend',()=>{this.setData()});

  }




}
